<template>
  <panel title="商品列表">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>

            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span><img :src="API + props.row.imgUrl" /></span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime }}</span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.ratings }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="sda">
          <img class="zhou" :src="API + sda.row.imgUrl" />
        </template>
      </el-table-column>

      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" v-premission="'super'" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" v-premission="'super'" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 模态框 -->
    <el-dialog title="修改商品" :visible.sync="dialogFormVisible">
      <el-form label-width="80px" size="small" :model="form">
        <el-form-item label="活动名称" label-width="80px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="商品分类" label-width="80px">
          <el-input v-model="form.category"></el-input>
        </el-form-item>

        <el-form-item label="商品价格" label-width="80px">
          <el-input v-model="form.price"></el-input>
        </el-form-item>

        <el-form-item label="商品图片" label-width="80px">
           <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/goods/goods_img_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
     
        >
          <img v-if="form.imgUrl" :src="API + form.imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>

        <el-form-item label="商品描述" label-width="80px">
          <el-input v-model="form.goodsDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editgoods">确 定</el-button>
      </div>
    </el-dialog>
  </panel>
</template>

<script>
import Panel from "../../components/panel/Panel.vue";
import { gdlist, delgd, editgoods } from "@/api/goods";
import { normalizedate } from "@/utils/tools";
import { Input } from "element-ui";
export default {
  components: {
    Panel,
  },
  data() {
    return {
      imageUrl: "",
      cancel: false,
      dialogFormVisible: false,
      API: "http://127.0.0.1:5000",
      tableData: [],
      total: 10,
      currentPage: 1,
      pageSize: 5,
      form: {
        name: "",
        category: "",
        imgUrl: "",
        price: "",
        goodsDesc: "",
        id: "",
      },
    };
  },

  methods: {
    async editgoods() {
      
      let res = await editgoods({
         name: this.form.name,
        category: this.form.category,
        imgUrl: this.form.imgUrl.substr(22),
        price: this.form.price,
        goodsDesc: this.form.goodsDesc,
        id: this.form.id,
      });
      console.log(res);
      if(res.status===200){
           this.dialogFormVisible = false;
      }
    },


     handleAvatarSuccess(res) {
     
      let { code, imgUrl, msg } = res;

      // 上传成功提示
      if (code === 0) {
        console.log(res);
        this.$message({
          type: "success",
          message: msg,
        });

        // 回填
        this.form.imgUrl = imgUrl;
      }
    },


  
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(row);
      this.form = row;
    },
  
    // 图片预览
    handlePictureCardPreview() {},
    // 获取列表
    async gdlist() {
      try {
        let res = await gdlist({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        });
        
        let { total, data } = res.data;

        data.forEach((item) => {
          item.ctime = normalizedate(item.ctime);
        });

        this.total = res.data.total;
        this.tableData = res.data.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1
      this.gdlist();
    },
    // 页码变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.gdlist();
    },

    async handleDelete(row) {
      try {
        let res = await delgd({
          id: row.id,
        });
        console.log(res);
        if (res.status === 200) {
          this.gdlist();
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
  created() {
    this.gdlist();
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.zhou {
  width: 50px;
  height: 50px;
}
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
